<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Consultar Turmas</title>
        <script type="text/javascript" src="/sgd/js/jquery.js" ></script>          
        <script type="text/javascript" src="/sgd/js/alocacao.js"></script>        
        <link rel="stylesheet" href="/sgd/css/forms.css">
        <link rel="stylesheet" href="/sgd/css/bootstrap.min.css">        
        <link rel="stylesheet" href="/sgd/css/theme.bootstrap.css">        
        <script src="/sgd/js/jquery-ui.js"></script>        
        <script src="/sgd/js/jquery-1.10.2.js"></script>        
        <script src="/sgd/js/jquery-ui.js"></script>              
        <script type="text/javascript" src="/sgd/js/jquery.tablesorter.js"></script>
        <script type="text/javascript" src="/sgd/js/jquery.tablesorter.widgets.js"></script>
        <script src="./sgd/js/alocacao.js"></script>        
    </head>
    <script>
        $(function() {


            $("#procurar").click(function() {
                var params = $(form).serialize();
                $.ajax(
                        {
                            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                            type: "POST",
                            url: "fm_getTurmas.jsp?tp=2&token=" + $("#token").val(),
                            data: params,
                            beforeSend: function() {
                                // exibe na tela uma
                                // msg de carregando
                                $('#turmas').html('<img src="../imagens/loading.gif"/>');

                            },
                            success: function(txt) {
                                $('#turmas').html(txt);
                            },
                            error: function(txt) {
                                $('#turmas').html(txt);
                            }
                        }
                );
            });
            $("#nova").click(function() {
                document.form.action = 'fm_new_turmas.jsp?token=${sessionScope.token}';
                document.form.submit();
            });
            $("#procurar").button();
            $("#nova").button();
        });
        $(function() {
            var dates = $('#data_inicio, #data_fim').datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onSelect: function(selectedDate) {
                    var option = this.id == "data_inicio" ? "minDate" : "maxDate";
                    var instance = $(this).data("datepicker");
                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });
        });
    </script>
    <script>
        $(function() {
            $.extend($.tablesorter.themes.bootstrap, {
                // these classes are added to the table. To see other table classes available,
                // look here: http://twitter.github.com/bootstrap/base-css.html#tables
                table: 'table table-bordered',
                caption: 'caption',
                header: 'bootstrap-header', // give the header a gradient background
                footerRow: '',
                footerCells: '',
                icons: '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
                sortNone: 'bootstrap-icon-unsorted',
                sortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes classes for Bootstrap v2 & v3
                sortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
                active: 'ui-state-active', // applied when column is sorted
                hover: 'ui-state-hover', // hover class
                filterRow: '',
                even: 'ui-widget-content', // odd row zebra striping
                odd: 'ui-state-default'   // even row zebra striping                
            });

            // call the tablesorter plugin and apply the uitheme widget
            $("table").tablesorter({
                // this will apply the bootstrap theme if "uitheme" widget is included
                // the widgetOptions.uitheme is no longer required to be set
                theme: "bootstrap",
                widthFixed: true,
                headerTemplate: '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!

                // widget code contained in the jquery.tablesorter.widgets.js file
                // use the zebra stripe widget if you plan on hiding any rows (filter widget)
                widgets: ["uitheme", "filter", "zebra"],
                widgetOptions: {
                    // using the default zebra striping class name, so it actually isn't included in the theme variable above
                    // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
                    zebra: ["even", "odd"],
                    // reset filters button
                    filter_reset: ".reset"

                            // set the uitheme widget to use the bootstrap theme class names
                            // this is no longer required, if theme is set
                            // ,uitheme : "bootstrap"

                }
            })
                    .tablesorterPager({
                        // target the pager markup - see the HTML block below
                        container: $(".ts-pager"),
                        // target the pager page select dropdown - choose a page
                        cssGoto: ".pagenum",
                        // remove rows from the table to speed up the sort of large tables.
                        // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                        removeRows: false,
                        // output string - default is '{page}/{totalPages}';
                        // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
                        output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

                    });
        });
    </script>
    <body>
        <div id="formulario">
            <h1>Turmas</h1>
            <form name="form" id="form" method="post" action="fm_lista_turmas.jsp">
                <input name="situacao_turma" value="" type="hidden">
                <p><label class="lbInput">Área<em>*</em></label>
                    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        SELECT  id_area, desc_area FROM areas
                        order by desc_area
                    </sql:query>
                    <select name="id_area" onchange="submit()">
                        <option value="">Selecione uma opção</option>
                        <c:forEach var="row" items="${query.rows}">
                            <option value="${row.id_area}" ${row.id_area==param.id_area?'selected':''}>${row.desc_area}</option>
                        </c:forEach>
                    </select>
                </p>
                <p><label class="lbInput">Modalidade<em>*</em></label>
                    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        SELECT  id_tipocurso,desc_tipocurso
                        FROM tipoCursos
                        order by desc_tipocurso
                    </sql:query>
                    <select name="id_tipocurso" onchange="submit()">
                        <option value="">Selecione uma opção</option>
                        <c:forEach var="row" items="${query.rows}">
                            <option value="${row.id_tipocurso}" ${row.id_tipocurso==param.id_tipocurso?'selected':''}>${row.desc_tipocurso}</option>
                        </c:forEach>
                    </select>
                </p>
                <p>
                <div id="cursos">
                    <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        select Cursos.*, desc_tipocurso
                        from Cursos
                        inner join TipoCursos on Cursos.id_tipocurso=TipoCursos.id_tipocurso
                        where id_area=?
                        and Cursos.id_tipocurso=?
                        order by nome_curso
                        <sql:param value="${param.id_area}"/>
                        <sql:param value="${param.id_tipocurso}"/>
                    </sql:query>
                    <c:choose>
                        <c:when test="${!empty query.rows}">
                            <label class="lbInput">Cursos<em>*</em></label>
                            <select id="id_curso" name="id_curso" class="required" onchange="submit()">
                                <option value="">Selecione um curso</option>
                                <c:forEach var="row" items="${query.rows}">
                                    <option value="${row.id_curso}" ${row.id_curso==param.id_curso?'selected':''}>${row.nome_curso} - ${row.codigo_curso} -  ${row.carga_horaria}h</option>
                                </c:forEach>
                            </select>
                        </c:when>
                        <c:otherwise>
                            <p style="font-size: 12pt; color: red">Nenhum curso encontrado.</p>
                        </c:otherwise>
                    </c:choose>
                </div>
                </p>
                <p><label class="lbInput">Unidade<em>*</em></label>
                    <sql:query var="queryUnidade" dataSource="jdbc/dbo_MicrosoftSQLServer">
                        SELECT  * FROM Unidades
                    </sql:query>
                    <select name="id_unidade">
                        <option value="">Selecione um valor</option>
                        <c:forEach var="unidade" items="${queryUnidade.rows}">
                            <option value="${unidade.id_unidade}">${unidade.desc_unidade}</option>
                        </c:forEach>
                    </select>
                </p>
                <p><label class="lbInput">Período</label>
                    <input type="text" id="data_inicio" name="data_inicio" size="12" value="${param.data_inicio}" maxlength="12" class="required">
                    <label class="lbInput">a</label>
                    <input type="text" id="data_fim" name="data_fim" size="12" maxlength="12" value="${param.data_fim}" class="required">
                </p>
                <p><label class="lbInput">Cód. Turma</label>
                    <input type="text" id="id_turma" name="id_turma" value="${param.id_turma}">
                </p>
                <input type="hidden"  id="token" name="token" value="${sessionScope.token}" />
            </form>
            <br>
            <button id="procurar">Procurar</button>
            <button id="nova">Nova Turma</button>
            <br>
            <div title="Legenda para turmas">

                <b><legend >Legendas</legend></b>                    
                <table cols="6">
                    <th>	
                        <form id="legenda" method="post" >

                            <input name="situacao_turma_duplo" value="A" type="hidden">
                            <img class="imagem_link" name="legenda"  src="/sgd/imagens/verde.png" title="Turmas cadastradas" onclick="getTurmas($(this).parent('form'))">
                            => Turmas Cadastradas
                            <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form></span>
                    </th>
                    <th>
                        <form id="legenda" method="post" >
                            <input name="situacao_turma" value="D" type="hidden">
                            <img class="imagem_link" src="/sgd/imagens/amarelo.png" title="Turmas Aguardando Docente" onclick="getTurmas($(this).parent('form'))">
                            => Aguardando Docente
                            <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
                    </th>
                    <th>
                        <span>
                            <form id="legenda" method="post" >
                                <input name="situacao_turma_duplo" value="R" type="hidden">
                                <img  class="imagem_link" src="/sgd/imagens/azul.png" title="Turmas liberadas para cadastro" onclick="getTurmas($(this).parent('form'))">
                                => Liberadas para cadastro
                                <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
                        </span>
                    </th>
                    <th>
                        <span>
                            <form id="legenda"  method="post" >
                                <input name="situacao_turma" value="F" type="hidden">
                                <img  class="imagem_link" src="/sgd/imagens/preto.png" title="Turmas Finalizadas" onclick="getTurmas($(this).parent('form'))">
                                => Finalizadas
                                <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
                        </span>
                    </th>
                    <th>
                        <span>
                            <form id="legenda" method="post" >

                                <input name="situacao_turma" value="G" type="hidden">
                                <img class="imagem_link"  src="/sgd/imagens/vermelho.png" title="Aguardando validação do gestor" onclick="getTurmas($(this).parent('form'))">
                                => Aguardando validação
                                <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
                        </span>
                    </th>
                    <th>
                        <span>
                            <form id="legenda" method="post" >

                                <input name="situacao_turma" value="C" type="hidden">
                                <img class="imagem_link"  src="/sgd/imagens/roxo.png" title="Turmas canceladas" onclick="getTurmas($(this).parent('form'))">
                                => Canceladas
                                <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
                        </span>
                    </th>                    
                </table>
            </div>         
            <div id="turmas">
            </div>
        </div>
    </body>
</html>
